@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-drawer';

$modes: ('regular', 'soft');
$sizes: ('s', 'm', 'l');
$drawer-background-color: (
  'regular': $sys-neutral-background1-level,
  'soft': $sys-neutral-background2-level,
);

.drawerRoot {
  z-index: auto !important; /* stylelint-disable-line declaration-no-important */
}

div[data-content-wrapper='true'] {
  will-change: transform;

  z-index: auto;

  overflow: unset;

  max-width: calc(100% - $space-drawer-outside-gap);
  height: 100%;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($drawer, 'window', $size);
    }
  }

  @each $mode in $modes {
    &[data-mode='#{$mode}'] {
      .drawer {
        background-color: simple-var($drawer-background-color, $mode);
      }
    }
  }
}

.drawer {
  overflow: unset;
  display: flex;
  flex-direction: column;

  box-sizing: border-box;

  box-shadow: simple-var($box-shadow-elevation-level5);
}

.headerElements {
  @include composite-var($drawer-header-elements-container);
  @include composite-var($drawer-header-elements-elements-layout);

  position: absolute;
  top: 0;
  right: 0;

  display: flex;
  align-items: center;
}

.mask {
  z-index: auto !important; /* stylelint-disable-line declaration-no-important */
  background-color: simple-var($sys-blackout);
}
